/**
 * @Author: likang xie
 * @Date: 2019-11-06 17:32:20
 * @Usage: Scss全局变量
 */

page,
html {
  --color-main: #e61717;
  --color-black: #333333;
  --color-white: #ffffff;
  --color-basic: #666666;
  --color-second: #999999;
  --color-border: #eeeeee;
  --color-border-deep: #cccccc;
  --color-disabled: #bfbfbf;
  --color-active: #f8f8f8;
  --color-mask: rgba($color: $color-black, $alpha: 0.6);
  --color-default: #d4d4d4;
}

@media (prefers-color-scheme: dark) {
  // @media screen and (min-width: 500px) {
  page,
  html {
    --color-black: #e0e0e0;
    --color-basic: #b7b1b1;
    --color-second: #999999;
    --color-border: #111111;
    --color-border-deep: #cccccc;
    --color-disabled: #bfbfbf;
    --color-active: #111111;
    --color-mask: rgba($color: $color-black, $alpha: 0.6);
    --color-default: #d4d4d4;
  }
}

// 基本颜色
$color-main: var(--color-main);
$color-black: var(--color-black);
$color-white: var(--color-white);
$color-basic: var(--color-basic);
$color-second: var(--color-second);
$color-border: var(--color-border);
$color-border-deep: var(--color-border-deep);
$color-disabled: var(--color-disabled);
$color-active: var(--color-active);
$color-mask: rgba(
  $color: var(--color-mask),
  $alpha: 0.6,
);
$color-default: var(--color-default);

// 主题颜色
$color-primary: #007aff;
$color-success: #00ca0d;
$color-warning: #f5a623;
$color-danger: #dd524d;

// 类名控制
@each $name,
  $color
    in (
      main: $color-main,
      black: $color-black,
      white: $color-white,
      basic: $color-basic,
      second: $color-second,
      disabled: $color-disabled,
      active: $color-active,
      default: $color-default,
      primary: $color-primary,
      success: $color-success,
      warning: $color-warning,
      danger: $color-danger
    )
{
  page,
  body {
    .cl-#{$name} {
      color: $color !important;
    }

    .bcl-#{$name} {
      background-color: $color !important;
    }
  }

  @media (prefers-color-scheme: dark) {
    // @media screen and (min-width: 500px) {
    page,
    body {
      .bcl-main {
        background-color: $color-active !important;
      }

      .bcl-white {
        background-color: #222222 !important;
      }
    }
  }

  .bcl-main-new {
    background-color: $color-main;
  }

  .bcl-black-new {
    background-color: #333333;
  }
}
@import 'uview-ui/theme.scss';

